<template>
  <div class="flex justify-between">
    <div class="flex items-center cursor-pointer" @click="handleClick">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ params.coin_name }}</span>
    </div>
    <div>
      <el-button
        icon="Promotion"
        size="large"
        type="primary"
        @click="isShowSendDrawer = true"
      >
        {{ $t("发送") }}
      </el-button>
      <el-button
        icon="MessageBox"
        size="large"
        type="primary"
        @click="isShowReceiveDrawer = true"
      >
        {{ $t("接收") }}
      </el-button>
    </div>
  </div>
  <el-card style="margin: 1.5rem 0">
    <div class="flex justify-start">
      <div class="flex justify-start" style="width: 33%">
        <span style="min-width: 5.25rem">{{ $t("总数量") }}:</span>
        <div>
          <div>{{ coinInfo.balance }}</div>
          <div>≈ {{ coinInfo.assets_unit }} {{ coinInfo.assets }}</div>
        </div>
      </div>
      <div class="flex justify-start" style="width: 33%">
        <span style="min-width: 5.25rem">{{ $t("可用数量") }}:</span>
        <div>
          <div>{{ coinInfo.available }}</div>
          <div>
            ≈ {{ coinInfo.assets_unit }} {{ coinInfo.available_assets }}
          </div>
        </div>
      </div>
      <div class="flex justify-start" style="width: 33%">
        <span style="min-width: 5.25rem">{{ $t("冻结数量") }}:</span>
        <div>
          <div>{{ coinInfo.freeze }}</div>
          <div>≈ {{ coinInfo.assets_unit }} {{ coinInfo.freeze_assets }}</div>
        </div>
      </div>
    </div>
  </el-card>

  <!-- <div class="filterRow">
    <el-input
      v-model="formData.bill_no"
      style="max-width: 30%; min-width: 200px"
      class="m-2"
      :placeholder="$t('订单号搜索')"
      @change="filterList"
      clearable
    />
    <el-select
      style="max-width: 30%; min-width: 200px"
      class="m-2"
      v-model="formData.status"
      :placeholder="$t('订单类型')"
      @change="filterList"
      clearable
    >
      <el-option
        v-for="item in status"
        :key="item.key"
        :label="item.name"
        :value="item.key"
      />
    </el-select>
    <el-date-picker
      class="m-2"
      style="max-width: 30%; min-width: 200px"
      v-model="formData.time"
      type="daterange"
      range-separator="-"
      :start-placeholder="$t('开始时间')"
      :end-placeholder="$t('结束时间')"
      @change="calendarChange"
      clearable
    />
  </div> -->

  <el-table :data="walletOrderList" v-loading="loading">
    <el-table-column prop="amount" :label="$t('数量')" align="center">
      <template #default="scope">
        <span
          :class="
            scope.row.sg
              ? scope.row.sg == '+'
                ? 'text-success'
                : 'text-danger'
              : ''
          "
        >
          {{ scope.row.sg }} {{ scope.row.amount }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="amount_after"
      :label="$t('交易后数量')"
    />
    <el-table-column
      align="center"
      prop="freeze_after"
      :label="$t('冻结后数量')"
    />
    <el-table-column
      align="center"
      prop="coin_name.coin_name"
      :label="$t('币种')"
    >
    </el-table-column>
    <el-table-column align="center" prop="trade_type" :label="$t('类型')">
    </el-table-column>
    <el-table-column align="center" :label="$t('时间')" width="250">
      <template #default="scope">
        {{ dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
  </el-table>

  <div class="flex justify-center mt-5">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      :default-current-page="query.page"
      :default-page-size="query.pagesize"
      @current-change="handleCurrentChange"
    />
  </div>

  <walletDetailDrawer
    v-if="currentBillNo"
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    from="records"
    @close="clearBillNo"
  />
  <walletSendDrawer
    :show="isShowSendDrawer"
    :currentCoinInfo="coinInfo"
    @close="isShowSendDrawer = false"
  />
  <walletReceiveDrawer
    :show="isShowReceiveDrawer"
    :currentCoinInfo="coinInfo"
    @close="isShowReceiveDrawer = false"
  />
</template>
<script setup>
import walletDetailDrawer from "./components/walletDetailDrawer.vue";
import walletSendDrawer from "./components/walletSendDrawer.vue";
import walletReceiveDrawer from "./components/walletReceiveDrawer.vue";
import { dayjs } from "element-plus";
import { ref, reactive, watch } from "vue";
import { getWalletCoinNewApi, getWalletRecordApi } from "@/api/wallet/index";
import { useUserStore } from "@/store/modules/user";
import { useRoute, useRouter } from "vue-router";
import { timestamp } from "@/utils/utils";
const { params } = useRoute();
const router = useRouter();
const useUser = useUserStore();
const coins_list = useUser.currentCoinListInfo.value;

const loading = ref(true);
let query = reactive({
  page: 1,
  pagesize: 10,
});
//筛选表单
const formData = reactive({
  bill_no: "",
  time: "",
  status: "",
});

const totalCount = ref(0);
const walletOrderList = ref([]);
const coinInfo = reactive({});
const getCoinDetailData = async () => {
  try {
    const coinInfoRes = await getWalletCoinNewApi({
      coin_name: params.coin_name,
    });
    for (const item in coinInfoRes) {
      coinInfo[item] = coinInfoRes[item];
    }
  } catch (e) {
    console.log(e);
  }
};
getCoinDetailData();

const getWalletBills = async () => {
  try {
    loading.value = true;
    const params = { ...query, ...formData };
    params.coin_name = params.coin_name;
    if (params.time) {
      params.start = params.time[0] ? timestamp(params.time[0].valueOf()) : "";
      params.end = params.time[1] ? timestamp(params.time[1].valueOf()) : "";
      delete params.time;
    }
    const { page, list, extra } = await getWalletRecordApi(params);
    walletOrderList.value = list;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
getWalletBills();

const handleCurrentChange = async (number) => {
  query.page = number;
  await getWalletBills();
};

const status = ref([
  { key: 0, name: "处理中", type: "" },
  { key: 1, name: "成功", type: "success" },
  { key: 2, name: "失败", type: "danger" },
]);
const calendarChange = (e) => {
  formData.time = e;
  getWalletBills();
};

const filterList = async () => {
  query.page = 1;
  await getWalletBills();
};

// 显示订单详情逻辑
const isShowOrderDetail = ref(false);
const currentBillNo = ref(null);
const showCurrentDetail = (scope) => {
  currentBillNo.value = scope.row.bill_no;
};
const clearBillNo = () => {
  currentBillNo.value = "";
};
watch(
  () => currentBillNo.value,
  (newVal) => {
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);

// 控制发送/接收弹窗显示
const isShowSendDrawer = ref(false);
const isShowReceiveDrawer = ref(false);

// 路由导航函数
const handleClick = () => {
  router.replace("/wallet/index");
};
</script>
<style lang="scss">
.filterRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
</style>
